<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>班级管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../css/oksub.css">
</head>
<body>
<div class="ok-body">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>班级管理</legend>
    </fieldset>
    <!--模糊搜索区域-->
    <div class="layui-row">
        <form class="layui-form layui-form-pane ok-form">
            <div class="layui-form-item">
                <label class="layui-form-label">所属专业</label>
                <div class="layui-input-block">
                    <select name="classify" lay-verify="required" id="profession" lay-filter="changeClass"
                            class="layui-select" lay-search>
                    </select>
                </div>
            </div>
        </form>
    </div>

    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/model.js"></script>
<script>
    layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils", "okMock", "jquery", "okNprogress"], function () {
        let table = layui.table;
        let form = layui.form;
        let laydate = layui.laydate;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let $ = layui.jquery;
        let okNprogress = layui.okNprogress;

        let professionId = -1;

        laydate.render({elem: "#startTime", type: "datetime"});
        laydate.render({elem: "#endTime", type: "datetime"});

        // 获取contentText
        const ctx = function () {
            let pathName = document.location.pathname;
            let index = pathName.substr(1).indexOf("/");
            let result = pathName.substr(0, index + 1);
            return result;
        }();

        okNprogress.start();

        getAllProfession(function () {
            console.log("数据获取成功")
        }, function () {
            okLayer.yellowSighMsg("数据请求失败，请刷新页面或检查网络是否正常！")
        })

        form.on('select(changeClass)', function (data) {
            professionId = data.value;
            classTable.reload({
                url: ctx + '/admin/getClzaaByProfessionId',
                where: {"professionId": professionId}, //设定异步数据接口的额外参数
                limit: 20,
                page: true,
                toolbar: true,
                toolbar: "#toolbarTpl",
                size: "sm",
                headers: {"token": sessionStorage.getItem("token")},
            });
        })

        let classTable = table.render({
            even: true, //开启隔行背景
            elem: '#tableId',
            url: ctx + '/admin/getClzaaByProfessionId',
            limit: 20,
            page: true,
            toolbar: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            headers: {"token": sessionStorage.getItem("token")},
            response: {
                statusCode: 200,
            },
            cols: [[
                {type: "checkbox", fixed: "left"},
                {field: "clazzid", title: "班级ID", width: 160, sort: true},
                {field: "clazzname", title: "班级名称", width: 200, edit: 'text'},
                {
                    field: "instructorid", title: "所属辅导员ID", width: 100, templet: function (d) {
                        return d.instructor ? (d.instructor.instructorid || '') : '';
                    }, hide: true
                },
                {
                    field: "counselorsname", title: "所属辅导员名称", width: 200, templet: function (d) {
                        return d.instructor ? (d.instructor.counselorsname || '') : '';
                    }
                },
                {
                    field: "professionid", title: "所属专业ID", width: 100, templet: function (d) {
                        return d.profession ? (d.profession.professionid || '') : '';
                    }, hide: true
                },
                {
                    field: "professionname", title: "所属专业名称", width: 200, templet: function (d) {
                        return d.profession ? (d.profession.professionname || '') : '';
                    }
                },
                {title: "操作", width: 100, align: "center", fixed: "right", templet: "#operationTpl"}
            ]],
            done: function (res, curr, count) {
                okNprogress.done();
            }, error: function (r) {
                okNprogress.done();
                console.log("错误信息", r)
                okLayer.yellowSighMsg("数据请求失败，请刷新页面或检查网络是否正常！")
            }
        });

        form.on("submit(search)", function (data) {
            classTable.reload({
                where: data.field,
                page: {curr: 1},
                headers: {"token": sessionStorage.getItem("token")},
            });
            return false;
        });

        table.on("toolbar(tableFilter)", function (obj) {
            switch (obj.event) {
                case "batchEnabled":
                    batchEnabled();
                    break;
                case "batchDisabled":
                    batchDisabled();
                    break;
                case "batchDel":
                    batchDel();
                    break;
                case "add":
                    add();
                    break;
            }
        });

        table.on("tool(tableFilter)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "del":
                    del(data);
                    break;
            }
        });

        function batchEnabled() {
            okLayer.open("批量添加班级", "class-batchInsert.html", "90%", "90%", null, function () {
                // 开始进度条
                okNprogress.start();
                classTable.reload();
                // 结束进度条
                okNprogress.done();
            });
        }

        function batchDisabled() {
            okLayer.confirm("确定要批量修改吗？", function (index) {
                layer.close(index);
                var checkStatus = table.checkStatus("tableId");
                var rows = checkStatus.data.length;
                if (rows > 0) {
                    var idsStr = checkStatus.data;
                    if (idsStr) {
                        var array = [];
                        for (var i = 0; i < rows; i++) {
                            array.push(new CLzaa(checkStatus.data[i].clazzid, checkStatus.data[i].clazzname, new Instructor(checkStatus.data[i].instructorid), new Profession(checkStatus.data[i].professionid)));
                        }
                        console.log("shuju", array)
                        $.ajax({
                            url: ctx + '/admin/batchUpdateClzaa',
                            type: 'POST',
                            data: {"jsonArrayClzaa": JSON.stringify(array)},
                            dataType: 'json',
                            error: function () {
                                okLayer.redCrossMsg("服务器错误")
                            },
                            success: function (data) {
                                if (data.code == 200) {
                                    // 业务正常
                                    okUtils.tableSuccessMsg(data.msg);
                                } else {
                                    // 业务异常
                                    okLayer.yellowSighMsg(data.msg)
                                }
                            }
                        });
                    }
                    return idsStr;
                } else {
                    layer.msg("未选择有效数据", {offset: "t", anim: 6});
                }
            });
        }

        function batchDel() {
            okLayer.confirm("确定要批量删除吗？", function (index) {
                layer.close(index);
                var checkStatus = table.checkStatus("tableId");
                var rows = checkStatus.data.length;
                if (rows > 0) {
                    var idsStr = checkStatus.data;
                    if (idsStr) {
                        var idsStr = "";
                        for (var i = 0; i < rows; i++) {
                            idsStr += parseInt(checkStatus.data[i].clazzid) + ",";
                        }
                        $.ajax({
                            url: ctx + '/admin/batchDelClzaa',
                            type: 'POST',
                            data: {"clzaas": idsStr},
                            dataType: 'json',
                            error: function () {
                                okLayer.redCrossMsg("服务器错误")
                            },
                            success: function (data) {
                                if (data.code == 200) {
                                    // 业务正常
                                    okUtils.tableSuccessMsg(data.msg);
                                    okNprogress.done();
                                } else {
                                    // 业务异常
                                    okLayer.yellowSighMsg(data.msg)
                                }
                            }
                        });
                    }
                    return idsStr;
                } else {
                    layer.msg("未选择有效数据", {offset: "t", anim: 6});
                }
            });
        }

        function add() {
            okLayer.open("添加班级", "class-add.html", "90%", "90%", null, function () {
                classTable.reload();
                okNprogress.done();
            })
        }

        function edit(data) {
            okLayer.open("修改班级", "class-edit.html", "90%", "90%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
                iframeWin.initForm(data);
            }, function () {
                okNprogress.start();
                classTable.reload();
                okNprogress.done();
            })
        }

        function del(data) {
            okLayer.confirm("确定要删除吗？", function () {
                $.ajax({
                    url: ctx + '/admin/delClzaa',
                    type: 'POST',
                    data: {"clazzid": data.clazzid},
                    dataType: 'json',
                    error: function () {
                        okLayer.redCrossMsg("服务器错误")
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            // 业务正常
                            okUtils.tableSuccessMsg(data.msg);
                            okNprogress.done();
                        } else {
                            // 业务异常
                            okLayer.yellowSighMsg(data.msg)
                        }
                    }
                });
            })
        }

        function getAllProfession(success, error) {
            $.ajax({
                url: ctx + "/admin/getAllProfession",
                type: 'POST',
                headers: {"token": sessionStorage.getItem("token")},
            }).done(function (datas) {
                var list = datas['data'];
                var option;
                if (list.length != 0) {
                    for (var i = 0; i < list.length; i++) {
                        if (i == 0) {
                            professionId = list[i]['professionId'];
                        }
                        option += "<option value='" + list[i]['professionid'] + "'>" + list[i]['professionname'] + "</option>";//拼接option中的内容
                        $("#profession").html(option);//将option的拼接内容加入select中，注意选择器是select的ID
                    }
                } else {
                    professionId = -1;
                }
                success();
                form.render('select');//重点：重新渲染select
            }).fail(function () {
                error();
                console.log("error");
            });
        }
    })
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="batchEnabled">批量添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="batchDisabled">批量修改</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加班级</button>
    </div>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>
